<template>
  <div>
    <h1>app</h1>
    <input type="text" ref="mes" />
    <button @click="showmes">展示文本框文字</button>
    <p>{{ texts }}</p>
    <hr />
    <Header ref="header" />
    <button @click="leijia">按下子组件加一</button>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
export default {
  name: "App",
  components: {
    Header,
  },
  methods: {
    showmes() {
      console.log(this);
      console.log(this.$refs.mes);
      console.log(this.$refs.mes.value);
      this.texts = this.$refs.mes.value;
    },
    leijia() {
      console.log(this.$refs.header);
      this.$refs.header.count++;
    },
  },
  data() {
    return {
      texts: "此处展示文本框输入内容",
    };
  },
};
</script>

<style></style>
